import React, { Component } from 'react'
import { Button } from 'antd'
import KFormSample from './KFormSample'


function Fetcher(props){
    return props.children({
        name:'小明',
        age:'21'
    })
}


function FetcherP(props) {
    return (
        <div>
            {/* React.Children提供若干操作嵌套内容的帮助方法 */}
            {React.Children.map(props.children,(child)=>{
                console.log(child)  //vdom
                if(child.type!='p'){    //过滤掉
                    return 
                }
                return  child
            })}
        </div>
    ) 
}


function RadioGroup(props){
    return (
       <div>
            {React.Children.map(props.children,(child)=>{
              return React.cloneElement(child,{
                  name:props.name
              })
            })}
       </div>
    )
}

function Radio({children,...rest}){
    return (
        <label htmlFor="">
            <input type="radio" {...rest}/> {children}
        </label>
    )
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Fetcher>
                    {/* children内容可以是任意表达式 */}
                    {({name,age})=>(
                        <div>
                            {/* 这里的数据是父组件带过来的 */}
                            姓名{name} 年龄{age}
                        </div>
                    )}
                </Fetcher>
                
                <FetcherP>
                    {/* 操作children */}
                    <h3>react</h3>   
                    <p>react很不错</p>
                    <h3>vue也还可以</h3>
                </FetcherP>

                {/* 编辑children */}
                <RadioGroup name={'mvvm'}>
                    <Radio value={'vue'}>vue</Radio>
                    <Radio value={'react'}>react</Radio>
                    <Radio value={'ng'}>ng</Radio>
                </RadioGroup>
            </div>
        )
    }
}
